<template>
    <view class="pub_page pub_page_bg pub_mine_label pub_header_padding">
        <pub-head headerName="mine_label" :headerConfig="headerConfig"></pub-head>
        <div class="pub_page_scroll page_box">
            <div class="lis_div">
                <div class="title">我的标签</div>
                <div class="lis">
                    <div class="li" v-for="(li,key) in myLabel" :key="key">
                        <div class="img_box">
                            <pub-image class="img" :src="li.coverImg"></pub-image>
                        </div>
                        <div class="txt">{{ li.title }}</div>
                    </div>
                    <div class="pub_nodata_2" v-if="myLabel.length==0">暂无标签数据</div>
                </div>
            </div>
            <div class="lis_div">
                <div class="title">可解锁标签</div>
                <div class="lis">
                    <div class="li" v-for="(li,key) in otherLabel" :key="key" @click="labelClick(li,key)">
                        <div class="img_box img_box_1">
                            <pub-image class="img" :src="li.coverImg"></pub-image>
                        </div>
                        <div class="txt">{{ li.title }}</div>
                    </div>
                    <div class="pub_nodata_2" v-if="otherLabel.length==0">暂无标签数据</div>
                </div>
            </div>
        </div>
        <div class="label_alert_div" v-if="labelAlertData.show">
            <div class="alert_box">
                <pub-image class="logo" :src="labelAlertData.data.coverImg" mode="widthFix" />
                <div class="title">{{ labelAlertData.data.title }}</div>
                <div class="msg">解锁当前标签 <br> 需消耗 {{ labelAlertData.data.price }} 金币永久获得标签</div>
                <div class="pub_btn" @click="sureUnlockLabel">确认解锁</div>
            </div>
            <text @click="labelAlertData.show=false" class="close icon-font-basic icon-b-off"></text>
        </div>
    </view>
</template>

<script>
export default {
    data() {
        return {
            headerConfig: {
                title: '标签',//标题栏内容
                left_type: 3,
            },

            myLabel: [],
            otherLabel: [],

            labelAlertData: {
                show: false,
                data: '',
                key: -1
            }
        };
    },
    onLoad() {
        this.getLabelInfo();
    },
    methods: {
        async getLabelInfo() {
            this.$comFun.openLoading();
            const res = await this.$request.get('quan/getMyLabelList', {});
            const res_1 = await this.$request.get('quan/getLabelList', {});
            this.$comFun.closeLoading();
            // console.log(res);
            if (res.code == 200) {
                this.myLabel = res.result;
            }
            if (res_1.code == 200) {
                this.otherLabel = res_1.result.filter(li => {
                    let find = this.myLabel.find(mli => {
                        return mli.labelId == li.id
                    })
                    return find ? false : true;
                });
            }
        },
        labelClick(info, key) {
            this.labelAlertData = {
                show: true,
                data: info,
                key: key
            }
        },
        async sureUnlockLabel() {
            this.$comFun.openLoading();
            const res = await this.$request.get('quan/unlockLabel', {
                labelId: this.labelAlertData.data.id
            });
            this.$comFun.closeLoading();
            // console.log(res);
            if (res.code == 200) {
                this.$comFun.toast('解锁成功');
                this.myLabel.push(this.labelAlertData.data);
                this.otherLabel.splice(this.labelAlertData.key, 1)
                this.labelAlertData = {
                    show: false,
                    data: '',
                    key: -1
                }
            } else {
                this.$comFun.toast(res.message)
            }
        }
    },
};
</script>

<style lang="scss" scoped>
@import "@/common/css/mine.scss";
</style>
